<template>
  <div class="container">
    <el-scrollbar height="100%">
      <p class="title"></p>
      <div v-for="item in flightData.data" :key="item.uid" class="scrollbar-demo-item" @click="toDetails(item)">
        <div class="flex items-center space-x-4">
          <svg width="35" height="35" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#icon-1a3702c92fb27154)">
              <path d="M4.99707 40.9883L42.9971 40.9883" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="miter"/>
              <path d="M8.52068 31.2641L3.90765 23.2741C4.87794 22.7139 9.67924 24.3889 11.4666 25.3061L21.1686 21.8332L12.8733 7.46538L16.9879 7.21842L30.3885 19.6798L38.6389 17.0682C42.2926 16.023 43.4449 18.0188 43.675 18.4175C45.0577 20.8123 42.2639 22.4252 41.8648 22.6556C38.672 24.499 8.52068 31.2641 8.52068 31.2641Z" fill="#9b9b9b" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="miter"/>
            </g>
            <defs>
              <clipPath id="icon-1a3702c92fb27154">
                <rect width="48" height="48" fill="#ffffff"/>
              </clipPath>
            </defs>
          </svg>
          <div>
            <div class="airline text-lg font-semibold" style="color: #dbe2ef">{{ item.airline }}</div>
            <div class="details text-muted-foreground" style="color: #dbe2ef">
              <span>{{ item.duration }} · {{ item.route }} · {{ item.startDate }} · {{ item.airlineNum }}</span>
            </div>
          </div>
          <div class="cllect-cancle" @click.stop>
            <el-button type="text" @click="open(item)">删除收藏</el-button>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <span class="price text-primary font-bold">￥{{ item.price }}</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      flightData: {
        data: []
      }
    };
  },
  mounted() {
    this.fetchFlightData();
  },
  methods: {
    async open(item) {
      this.$confirm('此操作将删除该收藏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const storedUserId = window.sessionStorage.getItem('userId');
          // 向后台发送删除请求
          await  axios.post('http://localhost:8000/users/collect/delete', {uid:item.uid, userId: storedUserId});
          // 刷新页面数据
          await this.fetchFlightData();

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } catch (error) {
          console.error('删除收藏失败:', error);
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async fetchFlightData() {
      try {
        const token = window.sessionStorage.getItem("token");
        console.log(token)
        if (!token) {
          console.error('未在 sessionStorage 中找到 Token.');
          return;
        }

        const response = await axios.get('http://localhost:8000/users/collect/data', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        this.flightData.data = response.data.data; // 确保正确访问 'data' 字段

        console.log('成功获取航班数据:', this.flightData.data);
      } catch (error) {
        console.error('获取航班数据失败:', error);
      }
    },
    toDetails(item) {
      const itemQuery = JSON.stringify(item);
      const url = `/details?item=${encodeURIComponent(itemQuery)}`;
      window.open(url, '_blank');
    }
  }

};
</script>

<style scoped>
.scrollbar-demo-item {
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  cursor: pointer;
}
.scrollbar-demo-item:hover {
  background-color: #393e46;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.space-x-4 > * + * {
  margin-left: 16px;
}
.text-lg {
  font-size: 1.125rem;
}
.font-semibold {
  font-weight: 600;
}
.text-muted-foreground {
  color: #6c757d;
}
.text-primary {
  color: #409eff;
}
.font-bold {
  font-weight: bold;
}
.title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.container {
  height: 100vh; /* 使容器高度占满整个视口 */
  width: 100%;   /* 使容器宽度占满整个视口 */
  padding: 20px; /* 增加内边距 */
  box-sizing: border-box;
}

.cllect-cancle {
  margin-left: auto; /* 将按钮推到最右侧 */
}
</style>
